<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>顾客评价 - 萌迹(Cute Trail Admin)后台管理系统</title>
<link rel="icon" href="petvet.ico" type="image/ico">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid p-t-15">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .title {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }
        .filters {
            display: flex;
            gap: 15px;
        }
        select, button {
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid #ddd;
            background-color: white;
            cursor: pointer;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .chart-container {
            width: 100%;
            height: 500px;
            margin-bottom: 30px;
        }
        .summary-cards {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            gap: 15px;
        }
        .card {
            flex: 1;
            padding: 15px;
            border-radius: 6px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .card.good {
            background-color: #e8f5e9;
            border-top: 4px solid #4caf50;
        }
        .card.medium {
            background-color: #fff8e1;
            border-top: 4px solid #ffc107;
        }
        .card.bad {
            background-color: #ffebee;
            border-top: 4px solid #f44336;
        }
        .card-value {
            font-size: 28px;
            font-weight: bold;
            margin: 10px 0;
        }
        .card-title {
            font-size: 16px;
            color: #666;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .rating-good {
            color: #4caf50;
            font-weight: bold;
        }
        .rating-medium {
            color: #ffc107;
            font-weight: bold;
        }
        .rating-bad {
            color: #f44336;
            font-weight: bold;
        }
    </style>
</div>
</body>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">宠物医院顾客评价分析</div>
            <div class="filters">
                <select id="timeRange">
                    <option value="7">最近7天</option>
                    <option value="30" selected>最近30天</option>
                    <option value="90">最近3个月</option>
                    <option value="180">最近6个月</option>
                    <option value="365">最近1年</option>
                </select>
                <select id="department">
                    <option value="all">全部科室</option>
                    <option value="surgery">外科</option>
                    <option value="internal">内科</option>
                    <option value="dermatology">皮肤科</option>
                    <option value="dental">牙科</option>
                    <option value="emergency">急诊</option>
                </select>
                <button id="refresh">刷新数据</button>
                <button id="export">导出图表</button>
            </div>
        </div>

        <div class="summary-cards">
            <div class="card good">
                <div class="card-title">好评率</div>
                <div class="card-value">78%</div>
                <div>较上月 ↑2%</div>
            </div>
            <div class="card medium">
                <div class="card-title">中评率</div>
                <div class="card-value">15%</div>
                <div>较上月 ↓1%</div>
            </div>
            <div class="card bad">
                <div class="card-title">差评率</div>
                <div class="card-value">7%</div>
                <div>较上月 ↓1%</div>
            </div>
        </div>

        <div id="radarChart" class="chart-container"></div>

        <h3>详细评价数据</h3>
        <table>
            <thead>
                <tr>
                    <th>日期</th>
                    <th>科室</th>
                    <th>医生</th>
                    <th>服务态度</th>
                    <th>医疗技术</th>
                    <th>环境设施</th>
                    <th>综合评价</th>
                    <th>评价内容</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2023-10-15</td>
                    <td>外科</td>
                    <td>张医生</td>
                    <td class="rating-good">5.0</td>
                    <td class="rating-good">4.8</td>
                    <td class="rating-good">4.5</td>
                    <td class="rating-good">好评</td>
                    <td>医生非常专业，手术很成功，宠物恢复得很好</td>
                </tr>
                <tr>
                    <td>2023-10-14</td>
                    <td>内科</td>
                    <td>李医生</td>
                    <td class="rating-medium">3.5</td>
                    <td class="rating-good">4.2</td>
                    <td class="rating-medium">3.0</td>
                    <td class="rating-medium">中评</td>
                    <td>医术不错，但等待时间太长，环境有点吵</td>
                </tr>
                <tr>
                    <td>2023-10-12</td>
                    <td>皮肤科</td>
                    <td>王医生</td>
                    <td class="rating-bad">2.0</td>
                    <td class="rating-medium">3.0</td>
                    <td class="rating-good">4.0</td>
                    <td class="rating-bad">差评</td>
                    <td>医生态度冷淡，诊断结果不明确</td>
                </tr>
                <tr>
                    <td>2023-10-10</td>
                    <td>牙科</td>
                    <td>赵医生</td>
                    <td class="rating-good">4.8</td>
                    <td class="rating-good">4.9</td>
                    <td class="rating-good">4.7</td>
                    <td class="rating-good">好评</td>
                    <td>非常细心，解释得很清楚，宠物也不紧张</td>
                </tr>
                <tr>
                    <td>2023-10-08</td>
                    <td>急诊</td>
                    <td>刘医生</td>
                    <td class="rating-good">4.5</td>
                    <td class="rating-good">4.7</td>
                    <td class="rating-medium">3.5</td>
                    <td class="rating-good">好评</td>
                    <td>半夜急诊响应很快，救了宠物一命</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        // 初始化图表
        const chartDom = document.getElementById('radarChart');
        const myChart = echarts.init(chartDom);
        
        // 图表配置
        const option = {
            title: {
                text: '顾客评价多维分析',
                subtext: '基于好评、中评、差评的对比',
                left: 'center',
                top: 0
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    let result = `${params.seriesName}<br/>`;
                    params.data.value.forEach((val, index) => {
                        result += `${option.radar.indicator[index].name}: ${val}<br/>`;
                    });
                    return result;
                }
            },
            legend: {
                data: ['好评', '中评', '差评'],
                bottom: 10
            },
            radar: {
                indicator: [
                    { name: '服务态度', max: 100},
                    { name: '医疗技术', max: 100},
                    { name: '环境设施', max: 100},
                    { name: '价格合理性', max: 100},
                    { name: '等待时间', max: 100},
                    { name: '沟通解释', max: 100}
                ],
                radius: '65%',
                splitNumber: 4,
                axisName: {
                    color: '#333'
                },
                splitArea: {
                    areaStyle: {
                        color: ['rgba(255, 255, 255, 0.5)'],
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 0, 0, 0.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 0, 0, 0.2)'
                    }
                }
            },
            series: [{
                name: '评价对比',
                type: 'radar',
                emphasis: {
                    lineStyle: {
                        width: 4
                    }
                },
                data: [
                    {
                        value: [92, 88, 85, 78, 72, 90],
                        name: '好评',
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 2,
                            color: '#4CAF50'
                        },
                        areaStyle: {
                            color: 'rgba(76, 175, 80, 0.3)'
                        },
                        itemStyle: {
                            color: '#4CAF50'
                        }
                    },
                    {
                        value: [65, 70, 68, 55, 60, 62],
                        name: '中评',
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 2,
                            color: '#FFC107'
                        },
                        areaStyle: {
                            color: 'rgba(255, 193, 7, 0.3)'
                        },
                        itemStyle: {
                            color: '#FFC107'
                        }
                    },
                    {
                        value: [25, 30, 35, 20, 45, 22],
                        name: '差评',
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 2,
                            color: '#F44336'
                        },
                        areaStyle: {
                            color: 'rgba(244, 67, 54, 0.3)'
                        },
                        itemStyle: {
                            color: '#F44336'
                        }
                    }
                ]
            }]
        };

        // 应用配置
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function() {
            myChart.resize();
        });

        // 模拟数据刷新
        document.getElementById('refresh').addEventListener('click', function() {
            // 这里可以添加实际的数据刷新逻辑
            console.log('刷新数据，时间范围:', document.getElementById('timeRange').value, 
                        '科室:', document.getElementById('department').value);
            
            // 模拟数据变化
            const newData = [
                {
                    value: [90 + Math.floor(Math.random() * 10), 
                            85 + Math.floor(Math.random() * 10), 
                            80 + Math.floor(Math.random() * 10), 
                            75 + Math.floor(Math.random() * 10), 
                            70 + Math.floor(Math.random() * 10), 
                            85 + Math.floor(Math.random() * 10)],
                    name: '好评'
                },
                {
                    value: [60 + Math.floor(Math.random() * 10), 
                            65 + Math.floor(Math.random() * 10), 
                            70 + Math.floor(Math.random() * 10), 
                            55 + Math.floor(Math.random() * 10), 
                            50 + Math.floor(Math.random() * 10), 
                            60 + Math.floor(Math.random() * 10)],
                    name: '中评'
                },
                {
                    value: [20 + Math.floor(Math.random() * 10), 
                            25 + Math.floor(Math.random() * 10), 
                            30 + Math.floor(Math.random() * 10), 
                            15 + Math.floor(Math.random() * 10), 
                            40 + Math.floor(Math.random() * 10), 
                            20 + Math.floor(Math.random() * 10)],
                    name: '差评'
                }
            ];
            
            option.series[0].data = newData;
            myChart.setOption(option);
            
            // 更新摘要卡片
            const goodRate = 75 + Math.floor(Math.random() * 5);
            const mediumRate = 15 + Math.floor(Math.random() * 3);
            const badRate = 10 - Math.floor(Math.random() * 3);
            
            document.querySelector('.card.good .card-value').textContent = goodRate + '%';
            document.querySelector('.card.medium .card-value').textContent = mediumRate + '%';
            document.querySelector('.card.bad .card-value').textContent = badRate + '%';
        });

        // 导出图表功能
        document.getElementById('export').addEventListener('click', function() {
            const url = myChart.getDataURL({
                type: 'png',
                pixelRatio: 2,
                backgroundColor: '#fff'
            });
            const link = document.createElement('a');
            link.href = url;
            link.download = '宠物医院顾客评价分析.png';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    </script>
</body>
</html>